<template>
	<div class="wrapper">
		<!-- 顶部固定位 -->
		<div class="navbar">
			<div :style="{height:avoidSpace+'rpx'}"></div>
			<div @click="toLocation()" style="display:flex;padding: 10rpx 200rpx 10rpx 30rpx;align-items: center;">
				<text>万达广场C组团</text>
				<image src="/static/img/right_arrow.png" style="width:30rpx;height:30rpx;margin-left:4rpx;"></image>
			</div>
			<div style="display:flex;justify-content: space-between;width: 100%;padding: 12rpx 0;">
				<div
					style="display:flex;margin-left: 20rpx;justify-content: space-between;flex:1;align-items: center;background-color: white;border-radius: 50rpx;">
					<text style="padding-left:24rpx;">输入商品搜索</text>
					<text
						style="background-color: #ffc71c;border-radius: 50rpx;margin: 4rpx;padding: 10rpx 30rpx;">搜索</text>
				</div>
				<image src="/static/img/scan.png" style="width: 60rpx;height: 60rpx;padding: 0 20rpx;" @click="scan()">
				</image>

			</div>
		</div>
		<!-- 滚动位 -->
		<scroll-view class="content-box" show-scrollbar="false" scroll-y="true" @scrolltolower="loadData()">
			<!-- 频道区 -->
			<uni-swiper-dot class="uni-swiper-dot-box" :current="currIndex" :info="pages" mode="round"
				:dots-styles="dotsStyles">
				<swiper  @change="changeSwiper" :style="{ height: (swiperHeight * 2 + 30) + 'rpx' }" class="swiper-box">
					<swiper-item v-for="(page, index) in pages" :key="index">
						<view @click="getIndexLevelData" :id="'wrap' + index"  style="display: flex;flex-wrap: wrap;width: 100%;">
							<view v-for="(channel,index) in page" style="display: flex;flex-direction: column;width: 20%;height: 100rpx;align-items: center;">
							    <image src="/static/logo.png" style="width: 80rpx;height:80rpx;"></image>
								<text>{{channel.name}}</text>
							</view>
						</view>
						
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<!-- 列表推荐区 -->

		</scroll-view>
		<u-no-network @retry="init" @isConnected="isConnected"></u-no-network>
	</div>
</template>
<script>
	import {
		getFloorData,
		getIndexLevel
	} from "@/api/home";
	import permission from "@/js_sdk/wa-permission/permission.js"; //权限工具类
	import config from "@/config/config";
	export default {
		data() {
			return {
				avoidSpace: 80, //默认屏幕避让80rpx即40px
				isIos: "",
				dotsStyles: {
					backgroundColor: 'rgba(255, 90, 95,0.3)',
					border:'rgba(255, 90, 95,0.3)',
					selectedBackgroundColor: '#ffc71c',
					selectedBorder: '#ffc71c',
					width:3,
					height:3
				},
				currIndex: 0,
				swiperHeight:180,
				pages: [],
			};
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			wx.setBackgroundColor({
				backgroundColorTop: $main - color;, // 顶部下拉刷新窗口的背景色
				//backgroundColorBottom: '#00FA9A', // 底部加载更多窗口的背景色
			})
			this.avoidSpace = uni.getStorageSync("capsule").top * 2
			// #endif
			// #ifdef H5
			this.avoidSpace = 0
			// #endif
			 this.$nextTick(() => {
			    this.setSwiperHeight(); // 动态设置 swiper 的高度
			  });
		},
		
		onShow() {
           this.init();

		},
		methods: {
			/* 切换 swiper 滑块 */
			changeSwiper(e) {
			  this.currIndex = e.detail.current;
			  this.$nextTick(() => {
			    this.setSwiperHeight(); // 动态设置 swiper 的高度
			  });
			},
			/* 动态设置 swiper 的高度 */
			setSwiperHeight() {
			  const element = "#wrap" + this.currIndex;
			  const query = uni.createSelectorQuery().in(this);
			  query.select(element).boundingClientRect();
			  query.exec(res => {
			    if (res && res[0]) this.swiperHeight = res[0].height;
			  });
			},
			
			init() {
				let pageList=[]
				for (var i = 0; i < 3; i++) {
					let children =[]
					if(i==1){
						for (var j = 0; j < 5; j++) {
							children.push({
								name:'频道'+j
							})
						}
					}else{
						for (var j = 0; j < 15; j++) {
							children.push({
								name:'频道'+j
							})
						}
					}
					
					
					pageList.push(children)
				}
				this.pages = pageList;
				console.log(this.pages)
			
			},

			loadData() {

			},
			// 跳转定位地址列表页面
			toLocation() {
				uni.navigateTo({
					url: "/pages/navigation/locationList",
				});
			},
			async getIndexLevelData() {
				let latitude = uni.getStorageSync('locationLat')
				let longitude = uni.getStorageSync('locationLon')

				let params = {
					current: 1,
					latitude: 41.783226, // latitude
					longitude: 123.359605, // longitude
					subAdminArea: '沈阳市', //this.geoData.city
					oneCategoryId: '1348576427264204941',
				}
				// getIndexLevel(params).then((res) => {
				// 	console.log("获取菜单一级分类", res);
				// })
				let res = await getIndexLevel(params)
				console.log("获取菜单一级分类", res);
			},
			// 是否有网络链接
			isConnected(val) {
				val ? this.init() : ''
			},

			/**
			 * TODO 扫码功能后续还会后续增加
			 * 应该实现的功能目前计划有：
			 * 扫描商品跳转商品页面
			 * 扫描活动跳转活动页面
			 * 扫描二维码登录
			 * 扫描其他站信息 弹出提示，返回首页。
			 */
			scanCode() {
				uni.scanCode({
					success: function(res) {
						let path = encodeURIComponent(res.result);
						if (path != undefined && path.indexOf("QR_CODE_LOGIN_SESSION") == 0) {
							console.log(path)
							//app扫码登录
							uni.navigateTo({
								url: "/pages/passport/scannerCodeLoginConfirm?token=" + path
							});
							return;
						}

						// WX_CODE 为小程序码
						if (res.scanType == "WX_CODE") {
							console.log(res);
							uni.navigateTo({
								url: `/${res.path}`,
							});
						} else {
							config.scanAuthNavigation.forEach((src) => {
								if (res.result.indexOf(src) != -1) {
									uni.navigateTo({
										url: `/${res.result.substring(src.length)}`,
									});
								} else {
									setTimeout(() => {
										uni.navigateTo({
											url: "/pages/tabbar/home/web-view?src=" +
												path,
										});
									}, 100);
								}
							});
						}
					},
				});
			},

			/**
			 * 提示获取权限
			 */
			tipsGetSettings() {
				uni.showModal({
					title: "提示",
					content: "您已经关闭相机权限,去设置",
					success: function(res) {
						if (res.confirm) {
							if (this.isIos) {
								plus.runtime.openURL("app-settings:");
							} else {
								permission.gotoAppPermissionSetting();
							}
						}
					},
				});
			},

			/**
			 * 唤醒客户端扫码
			 * 没权限去申请权限，有权限获取扫码功能
			 */
			async scan() {
				// #ifdef APP-PLUS
				this.isIos = plus.os.name == "iOS";
				// 判断是否是Ios
				if (this.isIos) {
					const iosFirstCamera = uni.getStorageSync("iosFirstCamera"); //是不是第一次开启相机
					if (iosFirstCamera !== "false") {
						uni.setStorageSync("iosFirstCamera", "false"); //设为false就代表不是第一次开启相机
						this.scanCode();
					} else {
						if (permission.judgeIosPermission("camera")) {
							this.scanCode();
						} else {
							// 没有权限提醒是否去申请权限
							this.tipsGetSettings();
						}
					}
				} else {
					/**
					 * TODO 安卓 权限已经授权了，调用api总是显示用户已永久拒绝申请。人傻了
					 * TODO 如果xdm有更好的办法请在 https://gitee.com/beijing_hongye_huicheng/lilishop/issues 提下谢谢
					 */
					this.scanCode();
				}

				// #endif

				// #ifdef MP-WEIXIN
				this.scanCode();
				// #endif
			},

		},
		onReachBottom() {
			// 监听触底加载
			uni.pull
		},

		onPullDownRefresh() {


			uni.stopPullDownRefresh();
		},

	};
</script>

<style lang="scss" scoped>
	.wrapper {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

   .swiper-box{
	   height:360rpx;
   }
	.navbar {
		display: flex;
		flex-direction: column;
		background: $main-color;
		z-index: 10;

	}

	.content-box {
		flex: 1;
	}
</style>